<template>
  <a-modal
    title="新增食谱"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :labelCol="{'width':'40%'}"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
        <a-row justify="start">
          <a-col span="10">
            <a-form-model-item label="菜谱名称" prop="recipeName">
              <a-input v-model="form.recipeName" style="width: 50%" placeholder="" />
            </a-form-model-item>
          </a-col>
          <a-col span="10">
            <a-form-model-item label="简写码" prop="abbreviation">
              <a-input v-model="form.abbreviation" style="width: 50%" placeholder="" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-button class="editable-add-btn" @click="handleAdd">
          新增
        </a-button>
        <a-table :dataSource="form.recipesDetailsList" :columns="columns">
          <template slot="foodName" slot-scope="text, record">
            <editable-cell :text="text" @change="onCellChange(record.id, 'foodName', $event)" />
          </template>
          <template slot="weight" slot-scope="text, record">
            <editable-cell :text="text" @change="onCellChange(record.id, 'weight', $event)" />
          </template>
          <template slot="operation" slot-scope="text, record">
            <a-popconfirm
              v-if="form.recipesDetailsList.length"
              title="确认删除?"
              @confirm="() => onDelete(record.id)"
            >
              <a href="javascript:;">移除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </a-form-model>

    </a-spin>
  </a-modal>
</template>

<script>
import EditableCell from '@/components/EditableCell'
import { addCookBookStore } from '@/api/modular/cookBook/cookBookManage'
import { getUuid } from '@/utils/util'

export default {
  components: { EditableCell },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      form: {
        recipeName:undefined,
        abbreviation:undefined,
        recipesDetailsList: []
      },
      columns: [
        {
          title: '食物名称',
          dataIndex: 'foodName',
          scopedSlots: { customRender: 'foodName' }
        },
        {
          title: '食物数量(克)',
          dataIndex: 'weight',
          scopedSlots: { customRender: 'weight' }
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      rules: {
        recipeName: [{ required: true, message: '请输入菜谱名称！', trigger: 'blur' }],
        abbreviation: [{ required: true, message: '请输入简写码！', trigger: 'blur' }]
      },
      visible: false,
      confirmLoading: false,
    }
  },
  methods: {
    // 初始化方法
    add() {
      this.visible = true
      this.$refs.form.resetFields()
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          addCookBookStore(this.form).then((res) => {
            if (res.success) {
              this.$message.success('新增成功')
              this.visible = false
              this.$emit('ok')
            } else {
              this.$message.error('新增失败：' + res.message)
            }
          }).finally((res) => {
            this.confirmLoading = false
          })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.$refs.form.resetFields()
      this.visible = false
    },
    onCellChange(id, dataIndex, value) {
      this.form.recipesDetailsList.find(i => i.id === id)[dataIndex] = value
    },
    handleAdd() {
      this.form.recipesDetailsList.push({
        id: getUuid(),
        recipesId: getUuid(),
        foodName: undefined,
        weight: undefined
      })
    },
    onDelete(id) {
      this.form.recipesDetailsList = this.form.recipesDetailsList.filter(item => item.id !== id)
    }
  }
}
</script>

<style scoped>
.unit {
  margin-left: 5px;
}

.editable-add-btn {
  margin-bottom: 8px;
}
</style>
